Flutter3 と Amplify UI Components で作成したログイン画面でユーザによるサインアップを無効化してみました

#Amplify Flutter

SIN

2022.09.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

CX事業本部デリバリー部の平内（SIN）です。

Flutterでの利用も提供されている、Amplify UI Componentsを使用すると、Cognitoと組み合わせて、ユーザーログインが簡単に準備できます。

https://ui.docs.amplify.aws/flutter/connected-components/authenticator

しかし、このUIは、デフォルトで「Create Account（ユーザーのサインアップ）」が可能になっており、メールアドレスを登録して、送られてきた Verification Codeを入力することで、アカウントが作成されます。

至れり尽くせりなのですが、「アカウント追加は、管理者のみで行う」というような要件では、ちょっと、このままでは利用できません。

そこで、今回は、Amplify UI Componentsを最大限利用しつつ、サインアップ機能は公開しないようにしてみました。

2 動作環境

今回使用したバージョンは、以下の通りです。

% amplify -v
9.2.1

% flutter --version
Flutter 3.3.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision e3c29ec00c (3 days ago) • 2022-09-14 08:46:55 -0500
Engine • revision a4ff2c53d8
Tools • Dart 2.18.1 • DevTools 2.15.0

3 Amplify UI Components

最初に、Amplify UI Componentsをデフォルトで利用する要領です。

Flutterアプリを作成し、必要なAmplifyのライブラリを追加します。

% flutter create sample_app
% cd sample_app
% flutter pub add amplify_flutter
% flutter pub add amplify_auth_cognito
% flutter pub add amplify_authenticator

Amplifyの設定です。認証機能を有効にしてデプロイしています。

% amplify init
% amplify add auth
% amplify push

/lib/main.dartは、以下のとおりです。

ログイン後に表示する画面を、Authenticator()の home: に設定しているだけです。

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';
import 'package:sample001/amplifyconfiguration.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State createState() => _MyAppState();
}

class _MyAppState extends State {
  final _amplify = Amplify;

  @override
  void initState() {
    _configureAmplify();
    super.initState();
  }

  Future _configureAmplify() async {
    try {
      await _amplify.addPlugins([
        AmplifyAuthCognito(),
      ]);
      await _amplify.configure(amplifyconfig);
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        builder: Authenticator.builder(),
        home: const HomePage(),
      ),
    );
  }
}

// ログイン後に表示される画面
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: ElevatedButton(
          child: const Text("Logout"),
          onPressed: () {
            Amplify.Auth.signOut();
          },
        ),
      ),
    );
  }
}

上記のコードで、ログイン・パスワード変更・サインアップが可能なアプリの完成です。

4 サインアップの無効化

Amplify UI Componentsは、カスタマイズが可能です。

https://ui.docs.amplify.aws/flutter/connected-components/authenticator/customization#full-ui-customization

ログイン画面をカスタマイズし、サインアップ（Create account）が、選択できないように、画面上部のタブを消しました。なお、Paddingについては、画面が横になっても違和感のないように、画面サイズから計算しています。

  @override
  Widget build(BuildContext context) {

    return Authenticator(
      authenticatorBuilder: (context, state) {
        switch (state.currentStep) {
          case AuthenticatorStep.signIn:
            return Scaffold(
              body: Padding(
                padding: EdgeInsets.fromLTRB(
                  MediaQuery.of(context).size.width / 10,
                  MediaQuery.of(context).size.height / 10,
                  MediaQuery.of(context).size.width / 10,
                  0,
                ),
                child: Column(
                  children: [
                    const Text(
                      "Sign in your accunt",
                      style:
                          TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
                    ),
                    SignInForm(),
                  ],
                ),
              ),
            );
          default:
            return null;
        }
      },
      child: MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        builder: Authenticator.builder(),
        home: const HomePage(),
      ),
    );
  }
}